<template>
  <!-- <a-modal
    :title="formTile + '工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  > -->
  <a-card>
    <template #extra>
        <a-button type="primary" @click="print" ghost style="margin-left: 10px;">打印</a-button>
        <a-button type="primary" @click="toTem" style="margin-left: 10px;">转工艺模板</a-button>
      </template>
    <div class="main">
      <div class="steps-content">
        <a-row type="flex" justify="start" align="top">
          <a-col :span="24">
            <div>
              <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
                <a-descriptions-item label="单号">
                  {{ billList.billNo }}
                </a-descriptions-item>
                <a-descriptions-item label="版次">
                  {{ billList.bc }}
                </a-descriptions-item>
                <a-descriptions-item label="第几件">
                  {{ billList.js }}
                </a-descriptions-item>
                <a-descriptions-item label="上货季">
                  {{ billList.scseason }}
                </a-descriptions-item>
                <a-descriptions-item label="样衣号">
                  {{ billList.sampleCode }}
                </a-descriptions-item>
                <a-descriptions-item label="款号">
                  {{ billList.styleid }}
                </a-descriptions-item>
                <a-descriptions-item label="品名">
                  {{ billList.sampleName }}
                </a-descriptions-item>
                <a-descriptions-item label="品类">
                  {{ billList.sampleCat }}
                </a-descriptions-item>
                <a-descriptions-item label="工艺师">
                  {{ statusUser }}
                </a-descriptions-item>
                <a-descriptions-item label="制版师">
                  {{ billList.bs }}
                </a-descriptions-item>
                <a-descriptions-item label="放码师">
                  {{ billList.fmshor }}
                </a-descriptions-item>
                <a-descriptions-item label="时间">
                  {{ statusTime }}
                </a-descriptions-item>
              </a-descriptions>
              <a-card>
                <a-form :form="form" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
                  <a-form-item label="颜色">
                    <div style="text-align: left;"><span style="margin-right:10px" v-for="item, i in stycolor" :key="i">{{
                      item }}</span></div>
                  </a-form-item>
                  <a-form-item label="后道工序" style="text-align:left;">
                    <span style="white-space: pre-line;margin-top: -15px;">{{ firstForm.beof }}</span>
                  </a-form-item>
                  <a-form-item label="面料正反面说明" style="text-align:left">

                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.fabricDesc }}</span>

                  </a-form-item>
                  <a-form-item label="纸样数量" style="text-align:left">

                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.zyNum }}</span>

                  </a-form-item>
                  <a-form-item label="裁床注意" style="text-align:left">
                    <span style="white-space: pre-line;margin-top: -15px;">{{ firstForm.cutting }}</span>
                  </a-form-item>
                  <a-form-item label="工序流程" style="text-align:left">

                    <span style="white-space: pre-line;margin-top: -15px;">{{ firstForm.process }}</span>

                  </a-form-item>
                  <!-- <a-form-item
                    label="粘衬部位"
                    style="text-align:left"
                  >
                    {{firstForm.interlining}}
                  </a-form-item> -->
                  <a-form-item label="特艺-排料/剪裁要求" style="text-align:left">
                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.tyReq }}</span>
                  </a-form-item>
                  <a-form-item label="特艺/特殊工艺" style="text-align:left">
                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.tyProcess }}</span>
                  </a-form-item>
                  <a-form-item label="缝制工艺" style="text-align:left">
                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.commonReq }}</span>
                  </a-form-item>
                  <a-form-item label="注意事项" style="text-align:left">
                    <span style="white-space: pre-line;margin-top: -15px;"> {{ firstForm.attention }}</span>
                  </a-form-item>
                  <a-row style="margin: 0 10% 0 12.6%;text-align:left">
                    <a-col :span="12">
                      <a-form-item label="纸样1">
                        经:
                        {{ firstForm.long1 }}
                        纬:
                        {{ firstForm.lat1 }}
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="纸样2">
                        经:
                        {{ firstForm.long2 }}
                        纬:
                        {{ firstForm.lat2 }}
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-form-item label="图片" style="text-align:left">
                    <div><img style="width: 200px;" :src="firstForm.styleImg" :alt="firstForm.styleImg" srcset=""></div>
                  </a-form-item>
                  <a-card title="工艺标签">
                    <a-row>
                      <a-col :span="12">
                        <a-form-item label="穿着方式" style="text-align:left;">
                          {{ firstForm.wearingWay }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="工艺细节" style="text-align:left;">
                          {{ firstForm.craftDetail }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="口袋样式" style="text-align:left;">
                          {{ firstForm.pocketStyle }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="下摆样式" style="text-align:left;">
                          {{ firstForm.lowerHem }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="开叉方式" style="text-align:left;">
                          {{ firstForm.slashWay }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="衣门襟" style="text-align:left;">
                          {{ firstForm.coatFlap }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="裤门襟" style="text-align:left;">
                          {{ firstForm.trouserFlag }}
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="是否有里" style="text-align:left;">
                          {{ firstForm.isLining }}
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-form>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </div>
      <div>
        <a-tabs :default-active-key="0" v-model="current">
          <a-tab-pane :tab="item.title" v-for="item in steps" :key="item.code">
          </a-tab-pane>
          <a-tab-pane v-if="billList.brand == '校服'" :key="4" tab="校服校标">
          </a-tab-pane>
          <a-tab-pane :key="5" tab="工艺尺寸">
          </a-tab-pane>
        </a-tabs>
        <a-card v-if="current == 0">
          <a-table :columns="columns5" :data-source="craftBillInterlining">
          </a-table>
        </a-card>
        <a-card v-if="current == 1">
          <a-table :columns="columns" :data-source="craftBillTemplate">
          </a-table>
        </a-card>
        <a-card v-if="current == 2">
          <a-table :columns="columns2" :defaultExpandAllRows="true" :data-source="craftBillPart">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="width:150px;height: 100px;object-fit: scale-down;" :src="record.imgurl"
                @click="prevImg(record.imgurl)" :alt="record.imgurl">
            </template>
          </a-table>
        </a-card>
        <a-card v-if="current == 3">
          <a-table :columns="columns3" :data-source="craftBillSpec">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="height: 100px;object-fit: scale-down;" :src="record.imgurl" @click="prevImg(record.imgurl)"
                :alt="record.imgurl">
            </template>
          </a-table>
        </a-card>
        <a-card v-if="current == 4">
          <a-table :columns="columns4" :data-source="craftBillSchoolVos">
            <template slot="imgurl" slot-scope="txt, record">
              <img style="height: 100px;object-fit: scale-down;" :src="record.imgurl" @click="prevImg(record.imgurl)"
                :alt="record.imgurl">
            </template>
          </a-table>
        </a-card>
        <a-card v-if="current == 5">
          <div style="width:100%" id="print">
            <div id="firstDe">
              <!-- <div>
                <a-row class="title">工艺材料单</a-row>
                <a-row>
                  <a-col :span="5" class="left">款号</a-col>
                  <a-col :span="7" class="right">{{ style }}</a-col>
                  <a-col :span="5" class="left">样衣号</a-col>
                  <a-col :span="7" class="right"> {{ designid }}</a-col>
                </a-row>
              </div> -->
              <div>
                <a-row style="border: 1px solid #f5f5f5;overflow: hidden;">
                  <a-col :span="7">
                    <a-row class="lastTitle">
                      单位:cm
                    </a-row>
                    <a-row>
                      <a-col :span="2" class="contentT">
                      </a-col>
                      <a-col :span="3" class="contentT">
                        序号
                      </a-col>
                      <a-col :span="6" class="contentT">
                        号型/部位
                      </a-col>
                      <a-col :span="13" class="contentT">
                        成衣测量说明
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-row v-for="item, i in partList" :key="i">
                        <a-col :span="2" class="contentH">
                          <a-checkbox :checked="item.isSync == 'Y' ? true : false" :disabled="true">
                          </a-checkbox>
                        </a-col>
                        <a-col :span="3" class="contentH" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                          {{ item.seq }}
                        </a-col>
                        <a-col :span="6" class="contentH" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                          {{ item.part }}
                        </a-col>
                        <a-col :span="13" class="contentE" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                          {{ item.clff }}
                        </a-col>
                      </a-row>
                    </a-row>
                  </a-col>
                  <a-col :span="7">
                    <a-row class="lastTitle">
                      纸样尺寸
                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap">
                        <div v-for="item, i in list" :key="i" class="contentH" :style="{
                          width: `${100 / list.length}%`,
                          background: (['APN 73', 'LESS', 'LESS工服','JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                        }">
                          {{ item.sizeid }}
                        </div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap">
                        <div v-for="item, i in list" :key="i" class="contentM"
                          :style="{ width: `${100 / list.length}%` }">
                          <div>{{ item.model }}</div>
                        </div>
                      </div>

                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap" v-for="item, i in partList" :key="i">
                        <div v-for="subitem, index in list" :key="index" class="contentH" contenteditable="true"
                          :style="{ width: `${100 / list.length}%` }">
                          <div v-for="x, i in item.info[1].detail" :key="i"
                            :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                            <span v-if="x.sizeId == subitem.sizeid"
                              :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }" style="z-index: 100;">
                              {{ x.sizeNum }}
                            </span>
                          </div>
                        </div>

                      </div>
                    </a-row>
                  </a-col>
                  <a-col :span="7">
                    <a-row class="lastTitle">
                      成衣尺寸
                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap">
                        <div v-for="item, i in list" :key="i" class="contentH" :style="{
                          width: `${100 / list.length}%`,
                          background: (['APN 73', 'LESS', 'LESS工服','JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                        }">
                          {{ item.sizeid }}
                        </div>
                      </div>
                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap">
                        <div v-for="item, i in list" :key="i" class="contentM"
                          :style="{ width: `${100 / list.length}%` }">
                          <div> {{ item.model }}</div>
                        </div>
                      </div>

                    </a-row>
                    <a-row>
                      <div style="display:flex;flex-wrap:wrap" v-for="item, i in partList" :key="i">
                        <div v-for="subitem, index in list" :key="index" class="contentH" :style="{
                          width: `${100 / list.length}%`,
                          background: (['APN 73', 'LESS', 'LESS工服','JNBY','JNBY工服', 'CROQUIS'].includes(brand) && item.sizeid == '03') || (brand == '蓬马' && ['29', '31', '35'].includes(item.sizeid)) || (brand == '童装' && ['30', '27'].includes(item.sizeid)) || (brand == '婴童' && xl == '连体衣' && ['21', '23'].includes(item.sizeid)) || (brand == '婴童' && xl != '连体衣' && item.sizeid == '24') ? 'yellow' : '#fff'
                        }">
                          <div v-for="x, i in item.info[0].detail" :key="i"
                            :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                            <span v-if="x.sizeId == subitem.sizeid"
                              :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }">
                              {{ x.sizeNum }}
                            </span>
                          </div>
                        </div>

                      </div>
                    </a-row>
                  </a-col>
                  <a-col :span="3">
                    <a-row class="lastTitle">
                      偏差
                    </a-row>
                    <a-row class="contentH">
                    </a-row>
                    <a-row class="contentH">
                    </a-row>
                    <a-row v-for="item, i in partList " :key="i" :style="{ background: item.isSync ? '#dcdfe6' : '#fff' }"
                      class="contentH">
                      {{ item.diff }}
                    </a-row>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <a-modal v-model="showBigImg" title="图片预览" @ok="showBigImg = false" :footer="null" width="60%" :mask="true">
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>

    </a-modal>
    <a-modal v-model="showPrint" title="打印" width="90%" @ok="showPrint = false" :footer="null">
        <pirntInfo>
      </pirntInfo>
      </a-modal>
  </a-card>

  <!-- </a-modal> -->
</template>

<script>
import { getBillList, getDetailList, getInterliningList, getTemplateList, getSpecList, getPartList, getSchoolList, getBillSize, getSizeList } from '@api/rd/index'
import pirntInfo from '../print/index.vue'

const columns = [
  {
    title: '描述',
    dataIndex: 'description'
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specId'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  }
]
const columns2 = [
  {
    title: 'ID',
    dataIndex: 'id'
  },

  {
    title: '序号',
    dataIndex: 'seq',
    sorter: (a, b) => a.seq - b.seq,
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 130,
    dataIndex: 'operName'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 300,
    dataIndex: 'description',
  },
]
const columns4 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '描述',
    dataIndex: 'description'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  }
]
const columns5 = [
  {
    title: '编号',
    dataIndex: 'code'
  },
  {
    title: '压力',
    dataIndex: 'pressure'
  },
  {
    title: '温度',
    dataIndex: 'temperature'
  },
  {
    title: '时间',
    dataIndex: 'time'
  },
  {
    title: '部位',
    dataIndex: 'part'
  }
]
export default {
  // props: {
  //   content: {
  //     type: Object,
  //     default: null
  //   }
  // },
  components: {
    pirntInfo
  },
  data() {
    return {
      id: '',
      columns,
      columns2,
      columns3,
      columns4,
      columns5,
      billNo: '',
      showBill: false,
      statusTime: '',
      statusUser: '',
      styleid: [],
      style: '',
      designid: '',
      prevImageUrl: '',
      loading: false,
      stycolor: [],
      showBigImg: false,
      idEdit: false,
      showPrint:false,
      detailImg: '',
      styleImg: '',
      disabled: false,
      firstForm: {},
      billList: {},
      list: [],
      partList: [],
      craftBillInterlining: [],
      craftBillTemplate: [],
      craftBillPart: [],
      craftBillSpec: [],
      craftBillSchoolVos: [],
      form: this.$form.createForm(this),
      current: 0,
      steps: [
        { code: 0, title: '粘衬部位' },
        { code: 1, title: '统一工艺' },
        { code: 2, title: '部位信息' },
        { code: 3, title: '特艺确认' }
      ],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    // const { content } = this.$props
    const id = this.$route.query.id
    this.sampleCode = this.$route.query.sampleCode
    this.brand = this.$route.query.brand

    // const billNo = this.$route.query.billNo
    if (id) {
      this.formTile = '查看'
      this.id = id
      // this.billNo = billNo
      this.$nextTick(() => {
        // this.getBillList()
        this.disabled = true
        this.getDetail()
      })
      this.idEdit = true
    }
  },
  methods: {
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },
    toTem() {
      this.$router.push({ path: '/rd/billTemplate/create', query: { id: this.id, type: 1 } })
    },
    print() {
      this.showPrint = true
    },
    async getDetail() {
      const params = {
        id: this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          this.billList = res.data
          const detail = res.data
          this.statusUser = res.data.statusUser
          this.statusTime = res.data.statusTime
          if (res.data.stycolorid) {
            this.stycolor = res.data.stycolorid.split(',')
          }
          this.firstForm = detail
          if (detail.styleImg) {
            this.styleImg = detail.styleImg
          }
          this.getInterliningList()
          this.getTemplateList()
          this.getPartList()
          this.getSpecList()
          this.getSchoolList()
          this.getSize()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async getInterliningList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getInterliningList('bill', params)
        if (res.code == 200) {
          this.craftBillInterlining = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取粘衬清单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取粘衬清单失败！')
      }
    },
    async getTemplateList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getTemplateList('bill', params)
        if (res.code == 200) {
          this.craftBillTemplate = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取统一工艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取统一工艺列表失败')
      }
    },
    async getPartList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getPartList('bill', params)
        if (res.code == 200) {
          this.craftBillPart = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getSpecList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSpecList('bill', params)
        if (res.code == 200) {
          this.craftBillSpec = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取特艺列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取特艺列表失败！')
      }
    },
    async getSchoolList() {
      const params = {
        id: this.id
      }
      try {
        const res = await getSchoolList('bill', params)
        if (res.code == 200) {
          this.craftBillSchoolVos = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取校服校标列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取校服校标失败！')
      }
    },
    async getSize() {
      const params = {
        sampleCode: this.sampleCode
      }
      try {
        const res = await getSizeList('c17', params)
        if (res.code == 200) {
          this.list = res.data
          this.list.map((item) => {
            item.model = item.model.replace("/", "\n")
          })
          if (res.data[0]) {
            this.style = res.data[0].styleid
            this.designid = res.data[0].designid
          }
          this.getBill()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺尺寸单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺尺寸单失败！')
      }
    },
    async getBill() {
      const params = {
        billId: this.id,
        // billNo: this.billNo
      }
      try {
        const res = await getBillSize('size', params)
        if (res.code == 200) {
          this.partList = res.data
          if (this.partList.length) {
            this.billId = this.partList[0].billId
            this.backid = this.partList[0].id
          }
          this.partList.map((x) => {
            x.info.map((y) => {
              if (!y.detail.length) {
                this.list.map((z) => {
                  const obj = {
                    diff: null,
                    remark: '',
                    sizeId: z.sizeid,
                    sizeNum: '',
                  }
                  y.detail.push(obj)
                })
              }
            })
          })
          // console.log(this.partList)
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位失败！')
      }
    },
    async getBillList() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getBillList('bill', params)
        if (res.code == 200) {
          this.billList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}

.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.ant-upload-picture-card-wrapper {
  width: 20%;
}

.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}

.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}

.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}

.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.previmg img {
  width: 500px;
}

.contentH {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  font-weight: 500;
}

.contentE {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px !important;
  text-align: center;
  font-weight: 500;
}

.contentT {
  border: 1px solid #f5f5f5;
  height: 80px;
  font-size: 16px;
  text-align: center;
  line-height: 80px;
  font-weight: 500;
}

.contentM {
  border: 1px solid #f5f5f5;
  height: 40px;
  font-size: 12px;
  text-align: center;
  white-space: pre-line;
  /* line-height: 40px; */
  font-weight: 500;
}

.lastTitle {
  font-size: 18px;
  font-weight: 500;
  background: #fafafa;
  line-height: 60px;
  border: 1px solid #f5f5f5;
  height: 60px;
  text-align: center;
}

.left {
  height: 53px;
  background-color: #fafafa;
  text-align: center;
  border: 1px solid #f5f5f5;
  line-height: 53px;
  font-size: 18px;
  font-weight: 500;
}

.right {
  height: 53px;
  text-align: center;
  border: 1px solid #f5f5f5;
  line-height: 53px;
  font-size: 16px;
  font-weight: 500;
}

.title {
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 24px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
</style>
